<template>
  <div class="uni-scroll" style="height: calc(100vh - 150px);">
    <el-form
      v-if="company"
      label-width="120px"
    >
      <!--          <el-form-item :label="$t('parent')+$t('name')">-->
      <!--            <el-input v-model="company.parentCompanyName" disabled />-->
      <!--          </el-form-item>-->
      <el-form-item :label="$t('icon')">
        <el-image
          style="width: 50px;height: 50px"
          :src="company.iconUrl"
          @click="dialogIconVisible = true"
        >
          <div slot="error" class="image-slot">
            <i class="el-icon-upload" @click="dialogIconVisible = true"/>
          </div>
        </el-image>
      </el-form-item>
      <el-form-item :label="$t('company')+$t('name')">
        <el-input v-model="company.companyName"/>
      </el-form-item>
      <el-form-item :label="$t('short')+$t('name')">
        <el-input v-model="company.shortCompanyName"/>
      </el-form-item>
      <el-form-item :label="$t('email')">
        <el-input v-model="company.email"/>
      </el-form-item>
      <el-form-item :label="$t('phoneNumber')">
        <el-input v-model="company.phone"/>
      </el-form-item>
      <el-form-item :label="$t('official')+$t('url')">
        <el-input v-model="company.officialUrl"/>
      </el-form-item>
      <el-form-item :label="$t('homePage')+$t('url')">
        <el-input v-model="company.homePageUrl"/>
      </el-form-item>
      <el-form-item :label="$t('weChat')+$t('qrCodeBaseUrl')">
        <el-input v-model="company.qrCodeBaseUrl"/>
      </el-form-item>
      <el-form-item :label="$t('forReferenceInfo')">
        <el-input v-model="company.forReferenceInfo"/>
      </el-form-item>
      <el-form-item :label="$t('token')+$t('overtime')">
        <el-input v-model="company.tokenOvertime"/>
      </el-form-item>
      <el-form-item :label="$t('language')">
        <el-select v-model="company.language">
          <el-option :label="$t('zh')" value="zh"/>
          <el-option :label="$t('en')" value="en"/>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('enable')+$t('phone')+$t('register')">
        <el-switch
          v-model="company.enablePhoneRegister"
          :active-text="$t('open')"
          :inactive-text="$t('close')"
        />
      </el-form-item>
      <el-form-item :label="$t('enable')+$t('register')">
        <el-switch
          v-model="company.enableRegister"
          :active-text="$t('open')"
          :inactive-text="$t('close')"
        />
      </el-form-item>
      <el-form-item :label="$t('userCross')">
        <el-switch
          v-model="company.userCross"
          :active-text="$t('open')"
          :inactive-text="$t('close')"
        />
      </el-form-item>
      <el-form-item
        :label="$t('manager')"
      >
        <el-button
          icon="el-icon-user"
          @click="showUpdateCompanyUser()"
        >{{
            company.userName
          }}
        </el-button>
      </el-form-item>
      <el-form-item
        :label="$t('demo')+$t('user')"
      >
        <el-button
          icon="el-icon-user"
          @click="showUpdateCompanyDemoAccount()"
        >{{
            company.demoAccountUserName
          }}
        </el-button>
      </el-form-item>
      <el-form-item :label="$t('demo')+$t('user')">
        <el-switch
          v-model="company.enableDemoAccount"
          :active-text="$t('open')"
          :inactive-text="$t('close')"
        />
      </el-form-item>
      <el-form-item :label="$t('map')">
        <div
          ref="companyMap"
          style="height: 300px; width: 80%;"
        />
      </el-form-item>
      <el-form-item :label="$t('save')">
        <el-button type="primary" @click="updateCompany">{{ $t('confirm') }}</el-button>
      </el-form-item>
    </el-form>

    <el-dialog
      :title="$t('edit')+$t('demo')+$t('user')"
      :visible.sync="dialogChangeDemoUserFormVisible"
    >
      <el-form
        @submit.native.prevent
        label-width="120px"
        :model="company"
      >
        <el-form-item :label="$t('demo')+$t('user')">
          <el-input v-model="demoAccountUser.userName"/>
        </el-form-item>
        <el-form-item :label="$t('password')">
          <el-input v-model="demoAccountUser.password"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogChangeDemoUserFormVisible = false">{{ $t('cancel') }}</el-button>
        <el-button type="primary" @click="updateCompanyDemoAccount">{{ $t('confirm') }}</el-button>
      </div>
    </el-dialog>

    <el-dialog
      :visible.sync="dialogIconVisible"
      width="400px"
    >
      <el-form  @submit.native.prevent>
        <el-form-item :label="$t('icon')">
          <el-upload
            ref="upload"
            :headers="headers"
            drag
            name="file"
            :action="baseURL+'/auth/company/updateIcon'"
            :on-success="handleSuccess"
            :on-error="handleError"
            :data="company"
          >
            <i class="el-icon-upload"/>
            <div class="el-upload__text">拖到此处，或<em>点击上传</em></div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogIconVisible = false">{{ $t('cancel') }}</el-button>
      </div>
    </el-dialog>


    <el-dialog
      :title="$t('manager')"
      :visible.sync="dialogChangeUserFormVisible"
    >
      <el-form
        label-width="120px"
        :model="company"
      >
        <el-form-item :label="$t('user')+$t('name')">
          <el-input v-model="companyUser.userName"/>
        </el-form-item>
        <el-form-item :label="$t('password')">
          <el-input v-model="companyUser.password"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogChangeUserFormVisible = false">{{ $t('cancel') }}</el-button>
        <el-button type="primary" @click="updateCompanyUser">{{ $t('confirm') }}</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { getToken } from '@/util/storage'
import { successNotice } from '@/util/common'

import { getCompany, updateCompany, updateDemoAccountUser, updateUser } from '@/api/auth/authCompanyApi'
import { addMapClickListener, clearAndMakeMarket, makeMap, makeMarket } from '@/util/mapTool'

export default {
  name: 'Config',
  props: {
    companyId: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      baseURL: window.VUE_APP_BASE_API,
      headers: {
        'access-token': getToken()
      },
      dialogIconVisible: false,
      dialogChangeDemoUserFormVisible: false,
      dialogChangeUserFormVisible: false,
      company: {},
      demoAccountUser:{},
      companyUser:{},
    }
  },
  created() {
    this.getCompany()
  },
  methods: {
    showUpdateCompanyUser() {
      this.dialogChangeUserFormVisible = true
    },
    updateCompanyUser() {
      updateUser({
        userName: this.companyUser.userName,
        password: this.companyUser.password,
        companyId: this.company.companyId
      }).then(res => {
        const { code } = res
        if (code === '200') {
          successNotice(this)
          this.getCompany()
          this.dialogChangeUserFormVisible = false
        }
      })
    },
    showUpdateCompanyDemoAccount() {
      this.dialogChangeDemoUserFormVisible = true
    },
    updateCompanyDemoAccount() {
      updateDemoAccountUser({
        userName: this.demoAccountUser.userName,
        password: this.demoAccountUser.password,
        companyId: this.company.companyId
      }).then(res => {
        const { code } = res
        if (code === '200') {
          successNotice(this)
          this.getCompany()
          this.dialogChangeDemoUserFormVisible = false
        }
      })
    },
    handleSuccess(res, file, fileList) {
      successNotice(this)
      this.dialogIconVisible = false
      this.getCompanyWithoutToken()
    },
    handleError(err, file, fileList) {
      this.getCompanyWithoutToken()
    },
    getCompany() {
      getCompany({
        companyId: this.companyId
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.company = data
          const that = this
          this.map = makeMap(this.$refs.companyMap, data.lat, data.lng, 8)
          makeMarket(this.map, data.lat, data.lng)
          addMapClickListener(this.map, function(e) {
            clearAndMakeMarket(that.map, e.latLng.lat, e.latLng.lng)
            that.company.lat = e.latLng.lat
            that.company.lng = e.latLng.lng
          })
        }
      })
    },
    updateCompany() {
      if (this.company.companyName == null || this.company.companyName === '') {
        this.$message.error(this.$t('company'))
        return
      }

      updateCompany({
        ...this.company
      }).then(res => {
        const { code } = res
        if (code === '200') {
          successNotice(this)
          this.getCompanyWithoutToken()
        }
      })
    }
  }
}
</script>


